<template>
	<view class="index">
		<home-nav></home-nav>
		<!-- swiper点插件 -->
		<uni-swiper-dot :info="banner" :current="current">
			<!-- swiper -->
			<swiper class="banner" @change="changeDot" circular="true">
				<swiper-item v-for="(item ,index) in banner" :key="index">
					<view class="swiper-item">
						<image mode="aspectFill" :src="item.backgroundImage.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 推荐 -->
		<view class="recommend">
			<view class="title">你想在哪使用投影仪</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<navigator class="scene" url="" v-for="(item,index) in recommend" :key="index">
					<image :src="item.image.url" mode="aspectFill"></image>
					<view class="text">{{item.text}}</view>
				</navigator>
			</scroll-view>
		</view>
		<view>
			<home-category v-for="(item,index) in homeCategory" :key="index" :item="item"></home-category>
		</view>
	</view>
</template>

<script>
	// 导入接口
	import {
		GetNewProduct,
		GetComer,
		GetHomeCategoryList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				title: 'Hello',
				banner: [], //banner数据
				current: 0, //幻灯片第n页
				recommend: [], //推荐
				homeCategory: [], //首页分类
			}
		},
		onLoad() {
			// 获取banner
			GetNewProduct()
				.then(res => {
					// 更新banner
					this.banner = res.data.data;
					console.log("主页数据", this.banner)
				})
				.catch(err => console.log(err, "err"))
			// 获取幻灯片数据
			GetComer()
				.then(res => {
					this.recommend = res.data.data;
				})
				.catch(err => console.log(err, "err"))
			GetHomeCategoryList()
				.then(res => {
					this.homeCategory = res.data.data;
				})

		},
		methods: {
			// swiper 发生变化时候更新current
			changeDot(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.recommend {
		margin-top: $uni-spacing-row-base;

		.title {
			font-size: $uni-font-size-sm*1.5;
			padding: $uni-spacing-row-base;
		}

		.scroll-view_H {
			white-space: nowrap;
			padding: 0 $uni-spacing-row-base;


		}

		.scene {
			width: 280rpx;
			height: 400rpx;
			border-radius: $uni-border-radius-lg;
			overflow: hidden;
			margin-right: $uni-spacing-row-base;
			display: inline-block;
			position: relative;

			image {
				width: 280rpx;
				height: 400rpx;
			}

			.text {
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;
				color: #fff
			}

		}
	}

	.banner {
		margin: 0 $uni-spacing-row-base;
		height: 1000rpx;
		border-radius: $uni-border-radius-lg;
		overflow: hidden;

		.swiper-item {
			height: 1000rpx;
			width: 100%;

			image {
				height: 1000rpx;
				width: 100%;

			}
		}

	}
</style>